// import dayjs from "dayjs";
import { type Ref, h, ref, reactive} from "vue";
import { message } from "@/utils/message";
import type { PaginationProps } from "@pureadmin/table";
import { type PlusColumn } from "plus-pro-components";
/** 弹窗组件 */
import { addDialog } from "@/components/ReDialog";
import editForm from "../form/add.vue";
import { getPaymentRecordList } from "@/api/payment";
import dayjs from "dayjs";

// 回款记录列表表格
const columns: TableColumnList = [
  {
    type: "expand",
    slot: "expand"
  },
  {
    label: "编号",
    prop: "id"
  },
  {
    label: "流水单号",
    prop: "payment_sn"
  },
  {
    label: "回款渠道",
    prop: "payment_channel"
  },
  {
    label: "总金额",
    prop: "total_amount"
  },
  {
    label: "到账时间",
    prop: "paid_at",
    formatter: (row: any) => dayjs(row.paid_at).format("YYYY-MM-DD HH:mm:ss")
  },
  {
    label: "到账账号",
    prop: "payer_account"
  },
  {
    label: "状态",
    prop: "status_name"
  }
];

// 回款记录详情表格
const childColumns = [
  {
    label: "订单ID",
    dataIndex: "order_no",
    prop: "order_no"
  },
  {
    label: "已分配金额",
    dataIndex: "allocated_amount",
    prop: "allocated_amount"
  }
];

/**
 * 回款记录mock数据
 * 根据数据库表结构payments和payment_order_details生成
 */
const dataList = ref<any[]>([]);

/** 翻页器定义 */
const pagination = reactive<PaginationProps>({
  total: 5,
  pageSize: 5,
  currentPage: 1
});

const searchState = ref({
  paymentSn: "",
  paymentChannel: "",
  paymentdate: [], // 初始化为空数组，以匹配日期范围选择器的期望格式
  page: 1,
  size: 10
});
// 搜索表单配置
const searchColumns: PlusColumn[] = [
  {
    label: "流水单号",
    prop: "paymentSn",
    valueType: "input",
    colProps: {
      span: 6
    }
  },
  {
    label: "回款方式",
    prop: "paymentChannel",
    valueType: "select",
    options: [
      { label: "支付宝", value: "支付宝" },
      { label: "中国银行", value: "中国银行" },
      { label: "民生银行", value: "民生银行" },
      { label: "现金", value: "现金" }
    ],
    colProps: {
      span: 6
    },
    fieldProps: {
      style: { width: "140px" }
    }
  },
  {
    label: "时间",
    prop: "paymentdate",
    valueType: "date-picker",
    fieldProps: {
      type: "daterange",
      style: { width: "240px" }
    },
    colProps: {
      span: 6
    }
  }
];

function getList(values: any) {
  if (values.paymentdate && !Array.isArray(values.paymentdate)) {
    // 如果paymentdate不是数组，将其转换为空数组
    values.paymentdate = [];
  }
  getPaymentRecordList({
    page: values.page,
    size: values.size,
    paymentSn: values.paymentSn,
    paymentChannel: values.paymentChannel,
    startDate: values.paymentdate[0] ? values.paymentdate[0] : undefined,
    endDate: values.paymentdate[1] ? values.paymentdate[1] : undefined
  }).then(res => {
    dataList.value = res.data.records;
    pagination.total = res.data.total;
  });
}

function handlePageChange(val) {
  pagination.currentPage = val;
  searchState.value.page = val;
  console.log(searchState.value);
  getList(searchState.value);
}

function handleSizeChange(val) {
  pagination.pageSize = val;
  searchState.value.size = val;
  getList(searchState.value);
}

function handleSearch(values: any) {
  // 处理搜索逻辑
  // console.log(values);
  getList(values);
}

function openDialog() {
  const formRef = ref();
  addDialog({
    title: "回款详情",
    width: "900px",
    contentRenderer: () => h(editForm, { ref: formRef })
  });
}

export {
  columns,
  childColumns,
  pagination,
  dataList,
  searchColumns,
  searchState,
  handleSearch,
  openDialog,
  handlePageChange,
  handleSizeChange
};
